<template>
    <div class="zhans">
        <div class="zhansnei">
            <div class="zhansname">
                <span>上链企业展示</span>
            </div>
            <template>
                <div class="horizontal-container">
                    <div class="scroll-wrapper" ref="scroll">
                        <div class="scroll-content">
                            <div class="scroll-item" v-for="(item, index) in emojis" :key="index">
                                <div class="scroll-one">
                                    <div class="gongsname">
                                        <div class="gongsimg" v-if="item.codeUrl"><img :src="item.codeUrl"></div>
                                        <div class="gs-xinxi">
                                            <span class="gs-name">{{item.companyName}}</span>
                                            <div class="gs-dizimg"><img src="../assets/imgs/diz.png"><span class="gs-diz">{{item.addr}}</span></div>
                                        </div>
                                    </div>
                                    <div class="gs-xianguan">
                                    	<span class="xianguan">相关资质</span>
                                    	<div class="xinxixiangqing">
                                    		<span><i>统一信用代码：</i>{{item.companyCode}}</span>
                                    	</div>
                                    	<div class="xinxixiangqing">
                                    		<span><i>食品经营许可证编号：</i>{{item.foodCertCode}}</span>
                                    	</div>
                                    	<div class="xinxixiangqing">
                                    		<span class="fanwei"><i>经营范围：</i>  {{item.content}}</span>
                                    	</div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
    </div>
</template>
<script>
import BScroll from '@better-scroll/core'
import axios from 'axios'
export default {
    data() {
        return {
            emojis: []
        }
    },
     watch: {
        emojis: function () {
          this.$nextTick(() => {
            this.bs.refresh()
          })
        }
      },
    mounted() {
        this.init()
    },
    beforeDestroy() {
        this.bs.destroy()
    },
    created(){
        this.pubci();
    },
    methods: {
        pubci(){
            axios.post('/api/web/pub/ci/list',{type:2}).then(response => {
                this.emojis = response.data.rows;
                console.log(response)
                // let data = response.data.data.school.yearCountByCountryMap;
                // this.emojis1 = data[2020];
                this.init();
            }
            
            ).catch(error => 
            console.log(error)
        )
        },
        init() {
            this.bs = new BScroll(this.$refs.scroll, {
                scrollX: true,
                probeType: 3 // listening scroll event
            })
            this.bs.on('scrollStart', () => {
                // console.log('scrollStart-')
            })
            this.bs.on('scroll', ({ y }) => {
                // console.log('scrolling-')
            })
            this.bs.on('scrollEnd', () => {
                // console.log('scrollingEnd')
            })
        }
    }
}
</script>
<style scoped>
.zhans {
    width: 100%;
    margin: 0 auto;
    height: 280px;
    background: rgba(0, 0, 0, 0.6);
    border: 3px solid;
    overflow: hidden;
    border-image: linear-gradient(270deg, rgba(0, 252, 255, 0.1), rgba(0, 252, 255, 1), rgba(0, 252, 255, 0.1)) 3 3;
}

.zhansnei {
    display: flex;
    padding: 16px 20px 16px 20px;
}

.zhansname {
    width: 40px;
    height: 248px;
    padding: 0 9px;
    margin-right: 24px;
    font-size: 0;
    text-align: center;
    background: linear-gradient(180deg, rgba(12, 254, 217, 0) 0%, #0CFED9 49%, rgba(12, 254, 217, 0) 100%);
}

.zhansname span {
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 40px;
}

.scroll-warp {
    width: 100%;
    overflow: hidden;
}

.scroll-temp {
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    float: left;
}

.scroll-wrapper {
    position: relative;
    width: 1840px;
    white-space: nowrap;
    border-radius: 5px;
    overflow: hidden;
}

.scroll-content {

    display: inline-block;
}

.scroll-item {
    font-size: 24px;
    display: inline-block;
    text-align: center;
}

.scroll-one {
    width: 256px;
    height: 228px;
    padding: 10px;
        float: left;
    background: rgba(0, 252, 255, 0.15);
    border-radius: 8px;
    margin-right: 16px;
}

.gongsimg {
    float: left;
    width: 53px;
    height: 70px;
    border-radius: 4px;
}

.gongsimg img {
    width: 100%;
    height: 100%;
}

.gs-xinxi {
    float: left;
    width: 199px;
    margin-left: 2px;
}

.gs-xinxi .gs-name {
    font-size: 18px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 25px;
    margin-left: 2px;
    text-align: left;
    display: -webkit-box !important;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.gongsname{
	overflow: hidden;
}
.gs-diz {
    font-size: 12px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 17px;
    display: -webkit-box !important;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.gs-dizimg {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 2px;
}

.gs-dizimg img {
    width: 12px;
    height: 13px;
}
.gs-xianguan{
	text-align: left;
	font-size: 16px;
	margin-top: 16px;
}
.xianguan{
	font-size: 16px;
font-weight: 600;
color: #FFFFFF;
line-height: 22px;
}
.xinxixiangqing span i{
	font-style: normal;
	font-size: 12px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 17px;
}
.xinxixiangqing span{
	white-space: normal;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 17px;
}
.fanwei{
	display: -webkit-box !important;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    white-space: normal;
	
}
</style>